<template>
  <div class="dumplings-container">
    <!-- 商品列表 -->
    <div class="goods-list">
      <div class="goods-item" v-for="item in dumplingList" :key="item.id" @click="handleProductClick(item)">
        <!-- 商品图片区域 -->
        <div class="goods-image-container">
          <van-image :src="item.pic" :error-src="errorImage" class="goods-image" fit="cover" />
        </div>

        <!-- 商品信息区域 -->
        <div class="goods-info">
          <div class="goods-title van-ellipsis">{{ item.title }}</div>
          <div class="rating-sales">
            <van-rate v-model="item.rating" readonly size="10" color="#ff9f00" void-color="#e0e0e0" />
            <span class="sales-count">月售 {{ item.soldCount }}</span>
          </div>
          <div class="price-container">
            <div class="price">￥{{ formatPrice(item.price) }}</div>
            <div v-if="item.originalPrice" class="original-price">￥{{ formatPrice(item.originalPrice) }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
   data() {
      return {
        dumplingList: [
          {
            id: 21,
            title: "五谷招牌渔粉",
            pic: "/img/flour1.jpg", // 修改为 public 目录下的 flour1.jpg
            rating: 4.5,
            soldCount: 300,
            price: 15.00,
            originalPrice: 20.00
          },
  		{
  		  id: 22,
  		  title: "传统牛肉面",
  		  pic: "/img/flour2.jpg", // 修改为 public 目录下的 flour1.jpg
  		  rating: 3.5,
  		  soldCount: 150,
  		  price: 18.00,
  		  originalPrice: 25.00
  		},
  		{
  		  id: 23,
  		  title: "牛肉手打面",
  		  pic: "/img/flour3.jpg", // 修改为 public 目录下的 flour1.jpg
  		  rating: 4.5,
  		  soldCount: 250,
  		  price: 20.00,
  		  originalPrice: 25.00
  		},
  		{
  		  id: 24,
  		  title: "牛肉炒拉面",
  		  pic: "/img/flour4.jpg", // 修改为 public 目录下的 flour1.jpg
  		  rating: 3.5,
  		  soldCount: 100,
  		  price: 16.00,
  		  originalPrice: 18.00
  		},
  		{
  		  id: 25,
  		  title: "招牌烧鸭面",
  		  pic: "/img/flour5.jpg", // 修改为 public 目录下的 flour1.jpg
  		  rating: 4.5,
  		  soldCount: 200,
  		  price: 18.00,
  		  originalPrice: 25.00
  		},
  		{
  		  id: 26,
  		  title: "霓虹叉烧豚骨拉面",
  		  pic: "/img/flour6.jpg", // 修改为 public 目录下的 flour1.jpg
  		  rating: 4.5,
  		  soldCount: 200,
  		  price: 23.00,
  		  originalPrice: 32.00
  		},
  		{
  		  id: 27,
  		  title: "砂锅肥牛米线",
  		  pic: "/img/flour7.jpg", // 修改为 public 目录下的 flour1.jpg
  		  rating: 4.5,
  		  soldCount: 63,
  		  price: 15.00,
  		  originalPrice: 25.00
  		},
  		{
  		  id: 28,
  		  title: "牛肉小面",
  		  pic: "/img/flour8.jpg", // 修改为 public 目录下的 flour1.jpg
  		  rating: 4.5,
  		  soldCount: 51,
  		  price: 15.00,
  		  originalPrice: 25.00
  		},
          {
            id: 29,
            title: "酸辣笋尖牛肉汤粉",
            pic: "/img/flour9.jpg", // 替换为实际图片链接
            rating: 3.2,
            soldCount: 24,
            price: 18.00,
            originalPrice: 22.00
          }
        ],
        errorImage: 'https://picsum.photos/300/300?text=图片加载失败',
      };
    },
  methods: {
     formatPrice(price) {
       return price.toFixed(2);
     },
     // 处理商品点击（保存记录+跳转）
     handleProductClick(product) {
       // 保存到浏览记录
       this.saveToHistory(product);
       // 跳转到详情页
       this.goToProductDetail(product.id);
     },
     // 保存商品到浏览记录
     saveToHistory(product) {
       // 从本地存储获取现有记录
       let historyList = JSON.parse(localStorage.getItem('historyHistory')) || [];
       
       // 提取需要保存的商品信息（确保与浏览记录页面格式一致）
       const historyItem = {
         id: product.id,
         title: product.title,
         pic: product.pic,
         price: product.price,
         browseTime: new Date().getTime() // 添加浏览时间戳
       };
       
       // 检查是否已存在该商品记录
       const existingIndex = historyList.findIndex(item => item.id === product.id);
       
       if (existingIndex !== -1) {
         // 已存在则更新时间
         historyList[existingIndex].browseTime = historyItem.browseTime;
       } else {
         // 不存在则添加到头部
         historyList.unshift(historyItem);
         // 限制最多保存20条记录
         if (historyList.length > 20) historyList.pop();
       }
       
       // 保存到本地存储
       localStorage.setItem('historyHistory', JSON.stringify(historyList));
     },
     // 跳转详情页
     goToProductDetail(id) {
       this.$router.push({
         name: 'productDetail',
         params: { id }
       });
     }
   }
 };
</script>

<style scoped>
.goods-list {
  display: flex;
  flex-direction: column;
}

.goods-item {
  display: flex;
  padding: 15px;
  border-bottom: 1px solid #eee;
}

.goods-image-container {
  flex: 0 0 120px;
  height: 120px;
  position: relative;
}

.goods-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.goods-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 12px 16px;
  justify-content: space-between;
}

.goods-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  line-height: 1.4;
  margin-bottom: 6px;
}

.rating-sales {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}

.sales-count {
  font-size: 12px;
  color: #666;
  margin-left: 8px;
}

.price-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.price {
  font-size: 18px;
  font-weight: bold;
  color: #e53935;
}

.original-price {
  font-size: 12px;
  color: #999;
  text-decoration: line-through;
  margin-left: 8px;
}
</style>